<template>
  <div class="container">
    <!-- <el-form :inline="true" size="small" :model="formInline">
      <el-form-item label="所属分类">
        <el-select
          clearable
          v-model="formInline.category_id"
          placeholder="请选择"
        >
          <el-option
            v-for="item in cateList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            @change="getTableData()"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-input
          v-model.trim="formInline.name"
          autocomplete="off"
          placeholder="请输入项目名称"
          @change="getTableData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-row>
          <el-button type="primary" @click="getTableData">查询</el-button>
        </el-row>
      </el-form-item>
    </el-form> -->
    <!--  <el-row :gutter="10">
      <el-col :span="1.5" v-auth="['system:role:add']">
        <el-button type="success" size="small" @click="showDialog"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <br /> -->
    <!--  <el-table
      stripe
      border
      :data="tableData"
      height="77vh"
      @row-click="handleRowClick"
    >
      <el-table-column type="index" align="center" label="序号" width="100">
      </el-table-column>
      <el-table-column prop="category_id" align="center" label="所属分类">
        <template slot-scope="scope">
          {{ formatterCategory_id(scope.row.category_id) }}
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="项目名称">
      </el-table-column>
      <el-table-column prop="total" align="center" label="总费用">
      </el-table-column>
      <el-table-column prop="total" align="center" label="价格详情">
        <template slot-scope="scope" v-if="scope.row.price_detail">
          <div>
            <el-popover placement="top-start" width="200" trigger="hover">
              <div
                v-for="(item, index) in scope.row.price_detailCopy"
                :key="index"
              >
                {{ item.name }}:{{ item.value }}
              </div>
              <el-button size="small" type="success" slot="reference"
                >价格详情</el-button
              >
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="simple_intro"
        align="center"
        show-overflow-tooltip
        label="项目简介"
      >
      </el-table-column>

      <el-table-column align="center" label="项目图标">
        <template slot-scope="scope">
          <div @click.stop="">
            <tablePrImg
              v-if="scope.row.icon"
              :imgSrc="scope.row.icon"
              :prImgList="[scope.row.icon]"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sale" align="center" label="是否上架">
        <template slot-scope="scope">
          <div @click.stop="">
            <el-switch
              v-model="scope.row.sale"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="handleChange(scope.row)"
            >
            </el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="操作" width="350">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click.stop="showbasicDialog(scope.row)"
            >编辑</el-button
          >

          <el-button
            type="danger"
            size="small"
            @click.stop="handleDeleteById(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="page.total"
      :page.sync="page.page"
      @pagination="getTableData"
    /> -->
    <baleTable :tableData="tableData" :tableHead="tableHead" :isSearch="true" :isTableRowClick="false"
      :tableLoading="tableLoading" :page="page" @pageSizeChange="pageSizeChange"
      @handleCurrentChange="handleCurrentChange" @searchMethods="searchMethods" @tableSortChange="tableSortChange"
      @handleRowClick="handleRowClick" ref="baleTable">
      <template #totalDetail="{ scope }">
        <div @click.stop="">
          <el-popover placement="top-start" width="200" trigger="hover">
            <div v-for="(item, index) in scope.row.price_detailCopy" :key="index">
              {{ item.name }}:{{ item.value }}
            </div>
            <el-button size="small" type="default" slot="reference">价格</el-button>
          </el-popover>
        </div>
      </template>

      <template #totalDetailMaterial="{ scope }">
        <div @click.stop="">
          <el-popover placement="top-start" width="200" trigger="hover">
            <div v-for="(item, index) in scope.row.material_price_detailCopy" :key="index">
              {{ item.name }}:{{ item.value }}
            </div>
            <el-button size="small" type="default" slot="reference">价格</el-button>
          </el-popover>
        </div>
      </template>

      <template #category_id="{ scope }">
        {{ formatterCategory_id(scope.row.category_id) }}
      </template>

      <template #caozuo="{ scope }">
        <el-button type="primary" size="small" @click.stop="showbasicDialog(scope.row)">编辑</el-button>

        <el-button type="danger" size="small" @click.stop="handleDeleteById(scope.row)">删除</el-button>
      </template>
      <template #headLeft>
        <div class="ml10 tableStats-btn tableStats-btn-active" @click="showDialog">
          添加
        </div>
      </template>
      <template #icon="{ scope }">
        <div @click.stop="">
          <tablePrImg v-if="scope.row.icon" :imgSrc="scope.row.icon" :prImgList="[scope.row.icon]" />
        </div>
      </template>

      <template #sale="{ scope }">
        <div @click.stop="">
          <el-switch v-model="scope.row.sale" :active-value="1" :inactive-value="0" @change="handleChange(scope.row)">
          </el-switch>
        </div>
      </template>

      <template #allow_refund="{ scope }">
        <div @click.stop="">
          {{ formatterAllow_refund(scope.row.allow_refund) }}
        </div>
      </template>
      <template #patient_pic_required="{ scope }">
        <div @click.stop="">
          {{ formatterAllow_refund(scope.row.patient_pic_required) }}
        </div>
      </template>
      <template #patient_status_required="{ scope }">
        <div @click.stop="">
          {{ formatterAllow_refund(scope.row.patient_status_required) }}
        </div>
      </template>
    </baleTable>

    <piceDialog ref="piceDialog" @changeList="getTableData"></piceDialog>
    <basicDialog ref="basicDialog" @changeList="getTableData"></basicDialog>
    <Content ref="content" />
  </div>
</template>

<script>
import { tableHead } from "./config";
import { Apiitem, ApiItemDel, ApiItemEditsale, ApiCateList } from "@a/index";
/* import menuDialog from "./component/menu_dialog.vue"; */
import piceDialog from "./component/pice_dialog.vue";
//基本信息
import basicDialog from "./component/basic_dialog.vue";
import pagination from "@/components/pagination.vue"; // secondary package based on el-pagination
import editor from "@/components/editor.vue";
import tablePrImg from "@/components/tablePrImg.vue";
import Content from "./component/content.vue";
export default {
  components: {
    /*   menuDialog, */
    piceDialog,
    basicDialog,
    pagination,
    editor,
    tablePrImg,
    Content,
  },
  data() {
    return {
      tableHead,
      /*       tableData: Array(20).fill(item), */
      formInline: {},
      page: {
        page: 1,
        size: 25,
        total: 0,
      },
      searchParams: {},
      sortParams: {},
      tableLoading: false,
      tableData: [],
      cateList: [],
    };
  },
  mounted() {
    this.getTableData();
    this.getCateList();
  },
  methods: {
    formatterAllow_refund(val) {
      if (val == 1) {
        return "是";
      } else {
        return "否";
      }
    },
    getOptions() { },
    getCateList() {
      ApiCateList().then((res) => {
        this.cateList = res.data;
        let val = [];
        res.data.forEach((item) => {
          val.push({ name: item.name, code: item.id });
        });
        const index = this.tableHead.findIndex(
          (item) => item.prop === "category_id"
        );
        if (index >= 0) {
          this.tableHead[index].searchOptions = val;
        }
      });
    },
    handleDeleteById(val) {
      console.log(22222, val);
      this.$confirm("是否删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
        type: "warning",
      })
        .then((res) => {
          ApiItemDel(val.id).then((res) => {
            this.$message.success("操作成功！");
            this.getTableData();
          });
        })
        .catch((err) => { });
    },
    formatterCategory_id(val) {
      let v = this.cateList.find((item) => {
        if (item.id == val) {
          return item;
        }
      });
      console.log("vv", v);
      if (v) {
        return v.name;
      } else {
        return val;
      }
    },
    formatterSale(val) {
      if (val == 1) {
        return "是";
      } else {
        return "否";
      }
    },
    getTableData(params = {}) {
      let postParams = {
        ...this.formInline,
        ...this.sortParams,
        ...this.page,
        ...params,
        ...this.searchParams,
      };
      this.tableLoading = true;
      Apiitem(postParams).then((res) => {
        let { data, page } = res;
        data.forEach((item) => {
          let val
          if (item.price_detail) {
            val = JSON.parse(item.price_detail);
          }

          let material_price_detail = JSON.parse(item.material_price_detail);
          //转换价格
          item.price_detailCopy = this.formatterPrice(val);
          //转换耗材费
          item.material_price_detailCopy = this.formatterPrice(
            material_price_detail
          );
        });
        this.tableData = data;
        this.page.total = page.total;

        this.tableLoading = false;
      });
    },

    formatterPrice(val) {
      let data = [];
      for (const key in val) {
        data.push({ name: key, value: val[key] });
      }
      return data;
    },

    showDialog() {
      this.$refs.basicDialog.showDialog();
    },
    showEditDialog(data) {
      this.$refs.piceDialog.showDialog(data);
    },
    showbasicDialog(data) {
      this.$refs.basicDialog.showDialog(data);
    },
    searchMethods(params) {
      this.searchParams = {};
      this.page.page = 1;
      this.searchParams = params;
      this.getTableData();
    },
    pageSizeChange(val) {
      this.page.size = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getTableData();
    },
    tableSortChange(params) {
      if (params.sort_str) {
        this.sortParams = { ...this.sortParams, ...params };
      } else {
        delete this.sortParams.sort_str;
        delete this.sortParams.sort_order;
      }
      this.page.page = 1;
      this.getTableData();
    },
    handleChange(val) {
      ApiItemEditsale({ sale: val.sale }, val.id).then((res) => {
        this.$message.success("操作成功！");
        this.getTableData();
      });
    },
    handleRowClick(row) {
      console.log(row);
      this.$refs.content.show(row.row);
    },
  },
};
</script>
<style></style>
